<template>
  <div class="shopping">
    <v-header :seller="seller"
              :max="seller.max"
              :goodsnation="nation"
              :intervaltime="seller.intervaltime"
              @plant='goodlang'
              @Num='lclassification'>
    </v-header>

    <!--历史订单icon-->
    <div class="history"
         @click="openHistory(selectFoods,$event)"></div>
    <!--/历史订单icon-->

    <!--菜单-->
    <div class="goods">
      <!--菜单分类左栏-->
      <div class="menu-wrapper"
           ref="menuWrapper">
        <ul>
          <!-- :class="[z_Num ==index?"current":'']" :class="[z_Num==index&&menuCurrentIndex==index?'current':'']" -->
          <li class="menu-item"
              v-show="!!item.det"
              v-for="(item,index) in goodsType"
              :key='index'
              :data-id='item.id'
              :class="[menuCurrentIndex==index?'current':'']">
            <span class="text border-bottom-1px"
                  @click="menuClick(index,$event)">{{changeTypeName(item)}} 
                  <span class="childdeg"></span>
              </span>

            <ul class=""
                v-show="item.child&&index==openChilden"
                style="width:66px;padding-left:10px;margin-top:10px">
              <li class="secondarymenu"
                  v-for="(itemchilren,chilrenindex) in item.child"
                  :key='chilrenindex'
                  :data-id='itemchilren.id'
                  :class="[itemchilrenindex==itemchilren.id?'itemchilrenindexcurrent':'']"
                  @click="menuClickchilds(index,itemchilren.id,$event)">{{changeTypeNamechilren(itemchilren)}}
                  </li>
            </ul>

            <!-- <ul class=""
                style="width:66px;padding-left:10px">
              <li class="secondarymenu"
                  v-for="(itemchilren,chilrenindex) in item.child"
                  :key='chilrenindex'
                  @click="menuClickchilds(index,chilrenindex,$event)">{{changeTypeNamechilren(itemchilren)}}</li>
            </ul> -->

          </li>

        </ul>
      </div>

      <!--/菜单分类左栏-->
      <!--菜品栏-->
      <div class="foods-wrapper"
           ref="foodsWrapper">
        <ul>

          <li v-show="item.det"
              v-for="(item,indexprand) in goodsType"
              :key='indexprand'
              class="food-list food-list-hook">

            <h1 v-if='!item.child'
                class="title">{{changeTypeNametitle(item)}}</h1>
            <ul v-if='item.child'
                class="childitemul">
              <div class="childgreenbox"
                   :data-id='itemchild.id'
                   v-for="(itemchild,itemchildindex) in item.child"
                   :key='itemchildindex'>

                <h1 class="title"
                    :data-id='itemchild.id'>{{changeTypeNametitle(itemchild)}}</h1>
                <li @click="selectFood(food,$event)"
                    v-for="(food,indexchilds) in itemchild.det"
                    :key='indexchilds'
                    :id="itemchild.id+'_'+indexchilds"
                    class="food-item border-bottom-1px">
                  <div class="icon">
                    <img v-lazy="food.img"
                         width="62"
                         height="62" />
                  </div>
                  <div class="content">
                    <div class="name">
                      <span class="product-num"
                            v-show="food.product_id!=0">{{food.product_id==0? '':food.product_id}}.</span>
                      {{changeFoodName(food)}}
                      <span class="remarks">{{food.remarks=='暂无'? '':food.remarks}}</span>
                    </div>
                    <span class="desc">{{fooddescribe(food)}}</span>
                    <!-- <span class="desc">{{food.instro}}</span> -->

                    <div class="price">
                      <span class="now"
                            v-show="food.cost>0">{{seller.currencydefault}}{{food.cost}}</span><span class="old"
                            v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                      <span class="now"
                            v-show="!(food.cost>0.00)"><del>{{seller.currencydefault}}{{food.cost}}</del></span>
                    </div>
                    <div class="cart-control-wrapper">
                      <cartcontrol :food="food"
                                   :cart-foods="cartFoods"
                                   @dec="decCart"
                                   @add="addCart"
                                   @addWithSpec="addWithSpec"></cartcontrol>
                    </div>
                  </div>
                </li>
              </div>
            </ul>
            <!-- 没有二级分类的菜 -->
            <ul v-if='item.det'>
              <li @click="selectFood(food,$event)"
                  v-for="(food,indexchilds) in item.det"
                  :key='indexchilds'
                  class="food-item border-bottom-1px">
                <div class="icon">
                  <img v-lazy="food.img"
                       width="62"
                       height="62" />
                </div>
                <div class="content">
                  <div class="name"><span class="product-num"
                          v-show="food.product_id!=0">{{food.product_id==0? '':food.product_id}}.</span>
                    {{changeFoodName(food)}}
                    <span class="remarks">{{food.remarks=='暂无'? '':food.remarks}}</span>
                  </div>
                  <span class="desc">{{fooddescribe(food)}}</span>
                  <!-- <span class="desc">{{food.instro}}</span> -->

                  <div class="price">
                    <span class="now"
                          v-show="food.cost>0">{{seller.currencydefault}}{{food.cost}}</span><span class="old"
                          v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                    <span class="now"
                          v-show="!(food.cost>0.00)"><del>{{seller.currencydefault}}{{food.cost}}</del></span>
                  </div>
                  <div class="cart-control-wrapper">
                    <cartcontrol :food="food"
                                 :cart-foods="cartFoods"
                                 @dec="decCart"
                                 @add="addCart"
                                 @addWithSpec="addWithSpec"></cartcontrol>
                  </div>
                </div>
              </li>
            </ul>

          </li>
        </ul>
      </div>
      <!--/菜品栏-->
      <shopcart @empty="emptyCartList"
                @dec="decCartList"
                @add="addCartList"
                ref="shopcart"
                :isOpenTable="parseInt(seller.is_opentablelimit)"
                :isOpenCall="seller.is_opencall"
                :callIntervalTime="seller.callintervaltime"
                :t_num="t_num"
                :select-foods="cartFoods"
                :max="seller.max"
                :currency-default="seller.currencydefault"
                :delivery-price="seller.deliveryPrice"></shopcart>
    </div>
    <!--/菜单-->
    <!--菜单详情组件-->
    <food @dec="decCart"
          @add="addCart"
          :cart-foods="cartFoods"
          :food="selectedFood"
          :currencydefault="seller.currencydefault"
          ref="food"
          :food_type='language_Nnm_class'></food>
    <!--/菜单详情组件-->
    <!--历史订单组件-->
    <orderHistory @closeHistory="hidePanel"
                  :history="history"
                  :currency-default="seller.currencydefault"
                  v-show="panelShow"
                  :tableNum="t_num"
                  ref="history"></orderHistory>
    <!--/历史订单组件-->
    <!--页面过期提示-->
    <div class="prompt"
         @click="isShowSpec = false"
         v-show="Expired || otherExpired || isShowSpec"></div>
    <div class="prompt-content"
         v-show="Expired">
      <div class="title">{{$t("message.decryptedTxt")}}
      </div>
    </div>
    <!-- 确认桌号 -->
    <div class="prompt-content"
         v-show="otherExpired">
      <div class="title">{{$t("message.otherExpired.txt1")}}{{t_num}}{{$t("message.otherExpired.txt2")}}
      </div>
      <div class="btn-wrapper">
        <div class="btn left"
             @click="tableNumIsRight">{{$t("message.otherExpired.yes")}}
        </div>
        <div class="btn right"
             @click="tableNumIsError">{{$t("message.otherExpired.no")}}
        </div>
      </div>
    </div>
    <specifications v-if="isShowSpec"
                    :cart-foods="cartFoods"
                    :food="activeFood"
                    @close="closeSpec"
                    @add="addWithSpec"
                    :currency-default="seller.currencydefault"
                    ref="specifications"></specifications>
  </div>

</template>

<script>
import header from './../header/header'
import BScroll from 'better-scroll'
import shopcart from './../shopcart/shopcart'
import cartcontrol from './../cartcontrol/cartcontrol'
import food from './../food/food'
import orderHistory from './../orderhistory/orderhistory'
import specifications from './../goods/specifications'
import { Toast } from 'mint-ui'
import bus from '../../store/bus.js'

export default {
  name: 'goods',
  components: {

    shopcart, // 购物车组件
    cartcontrol, // 加入购物车控制组件
    food, //  菜单详情组件
    orderHistory, // 历史订单组件
    'v-header': header,
    specifications
  },
  props: {
    // 边界回弹
    bounce: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // menuCurrentIndex: '',
      openChilden: '',
      itemchilrenindex: '',
      goodfalg: [],
      cartFoods: [],
      isShowSpec: false,
      history: [],
      panelShow: false,
      first: {
        name: 'Mitteilung',
        en_name: 'announcement',
        zn_name: '公告',
        de_name: 'de_name公告',
        notice_info: '',
        en_notice_info: '',
        de_notice_info: '',
        zn_notice_info: '',
        notice: ''
      },
      z_Num: '',
      id: '',
      goods: [],
      seller: {},
      goodsType: [],
      listHeight: [],
      scrollY: 0,
      foodsScrollY: 0,
      selectedFood: {},
      t_num: 1,
      t_nums: 'table_nums',
      decryptedTxt: '',
      Expired: !1,
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
      otherExpired: !1,
      activeFood: {},
      nation: '',
      language_Nnm_class: 0,
      itemdom: [],
      options: [
        {
          Announcement: '公告',
          label: 'zh-CN'
        },
        {
          Announcement: 'Mitteilung',
          label: 'de'
        },
        {
          Announcement: 'Announcement',
          label: 'en'
        },
        {
          Announcement: 'Avviso',
          label: 'it'
        },
        {
          Announcement: 'Bekendtgørelse',
          label: 'da'
        },

        {
          Announcement: 'Avis',
          label: 'fr'
        },
        {
          Announcement: 'Bericht',
          label: 'af'
        },
        {
          Announcement: 'Aviso',
          label: 'pt'
        },
        {
          Announcement: 'Meddelande',
          label: 'sv'
        },
        {
          Announcement: 'Anuncio',
          label: 'es'
        },

      ],

    }

  },
  created () {
    //  直接在链接中获取
    this.t_num = this.$TABLE;
    //  页面过期
    //         let timestamp = Math.round(new Date().getTime()/1000);
    //         if (localStorage.getItem('tableNum')&&!localStorage.getItem('lastTime')){
    //           if (this.t_num===localStorage.getItem('tableNum')){
    //             this.otherExpired = true;
    //           }else {
    //             //说明与上一次用餐的桌位不一样
    //             localStorage.setItem('tableNum',this.t_num);
    //             localStorage.setItem('lastTime',timestamp);
    //           }
    //         }else if (localStorage.getItem('tableNum')&&localStorage.getItem('lastTime')){
    //           if (this.t_num===localStorage.getItem('tableNum')){
    //             if(timestamp-Number(localStorage.getItem('lastTime'))>3600000*5){
    //               //有可能是把上一次的点餐页面存为标签，超过5小时提示页面失效
    //               this.Expired = true;
    //               //localStorage.removeItem('tableNum');
    //               localStorage.removeItem('lastTime');
    //             }else{
    //               //小于5小时
    // //              console.log('小于4小时');
    //             }
    //           }else {
    //             //说明与上一次用餐的桌位不一样
    //             localStorage.setItem('tableNum',this.t_num);
    //             localStorage.setItem('lastTime',timestamp);
    //           }
    //         }else{
    //           //说明是第一次点餐
    //           localStorage.setItem('tableNum',this.t_num);
    //           localStorage.setItem('lastTime',timestamp);
    //         }
    //         解密
    //        this.decryptedTxt = window.location.href.split('?')[1];
    //        this.$http({
    //          method: 'POST',
    //          url: 'http://order.huaqiaobang.com/index.php?ctrl=order&action=jmDecrypted',
    //          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    //          params: {
    //            'shopid': '306', 'plaintxt': this.decryptedTxt
    //          }
    //        }).then(res => {
    //          switch (res.data.code) {
    //            case 1:
    //              this.Expired = true;
    //              break;
    //            case 0:
    //              this.t_num = res.data.table_num;
    //              break;
    //          }
    //        }, function () {
    //        });


    if (navigator.language.indexOf("zh") >= 0) {
      this.$i18n.locale = 'zh-CN'
    } else if (navigator.language.indexOf("de") >= 0) {
      this.$i18n.locale = 'de'
    } else if (navigator.language.indexOf("en") >= 0) {
      this.$i18n.locale = 'en'
    } else if (navigator.language.indexOf("it") >= 0) {
      this.$i18n.locale = 'it'
    } else {
      this.$i18n.locale = 'de'
    }


    this.$http.post(`${this.$REQ_URL}ctrl=shop&action=getMultipleGoodsType&id=${this.$SHOP_ID}`,
      { headers: { 'Content-Type': 'application/json' } }
    ).then(res => {
      this.goodsType = res.data
      this.goodsType.unshift(this.first);
      this.$nextTick(() => {
        this._initScroll()
        this._calculateHeight()
      })
    })

  },

  watch: {
    '$route' (to, from) {
      window.location.reload();
    }
  },

  mounted () {
    this.goodlang()

    // this.goodlangreset()
    this.$http.get(`${this.$REQ_URL}ctrl=shop&action=jmGetShopInfo&id=${this.$SHOP_ID}`).then(res => {

      this.first.notice_info = res.data.notice_info
      this.first.en_notice_info = res.data.en_notice_info
      this.first.de_notice_info = res.data.de_notice_info
      this.first.zn_notice_info = res.data.zn_notice_info

      this.nation = res.data.shoplan

      this.seller = res.data
      this.seller.callintervaltime = parseInt(this.seller.callintervaltime)
      this.seller.is_opencall = parseInt(this.seller.is_opencall)
      document.title = res.data.shopname;
      bus.$emit('banner', res.data.shopbacklogo, res.data.bannerlink)

    })
  },
  methods: {
    goodlang (data) {

      for (let i in data) {
        for (let j = 0; j < this.options.length; j++) {
          if (data[i] == this.options[j].label) {
            if (i == 0) {
              this.first.name = this.options[j].Announcement
            } else if (i == 1) {
              this.first.en_name = this.options[j].Announcement
            } else if (i == 2) {
              this.first.zn_name = this.options[j].Announcement
            } else if (i == 3) {
              this.first.de_name = this.options[j].Announcement
            }
            // this.first[i] = this.options[j].Announcement

            // this.goodfalg.push(this.options[j].Announcement)
          }
        }
      }
      // console.log(this.goodfalg)
    },


    // goodlangreset () {
    //   for (let i = 0; i < this.goodfalg.length; i++) {
    //     this.first[i] = this.goodfalg[i]
    //     console.log(this.first[i])
    //   }
    // },
    //  清空购物车
    emptyCartList () {
      this.cartFoods = []
    },
    //  菜单列表、详情菜品减少
    decCart (food, num, disableDec) {
      if (num === 0) {
        return
      }
      if (food.goods_spec.length > 0 && disableDec) {
        Toast({
          message: this.$t('message.decCombo'),
          duration: 1e3
        })
        this.$refs.shopcart.fold = false
        return
      }
      let foundFood = this.cartFoods.find(({ id }) => id === food.id)
      if (foundFood.acount === 1) {
        this.cartFoods = this.cartFoods.filter(({ id }) => id !== foundFood.id)
      } else {
        foundFood.acount--
      }
    },
    //  菜单列表、详情菜品添加
    addCart (food, target) {
      if (food.goods_spec.length > 0) {
        this.isShowSpec = true
        this.activeFood = food
      } else {
        let foundFood = this.cartFoods.find(item => item.id === food.id)
        if (!foundFood) {
          let foodCopy = JSON.parse(JSON.stringify(food))
          foodCopy.acount = 1
          this.cartFoods.push(foodCopy)
        } else {
          foundFood.acount += 1
        }
        this.drop(target)
      }
    },
    //  购物车列表菜品减少
    decCartList (food, num) {
      if (num === 0) {
        return
      }
      let foundFood = this.cartFoods.find(({ id, options }) => id === food.id && options === food.options)
      if (foundFood.acount === 1) {
        this.cartFoods.splice(this.cartFoods.findIndex(({ id, options }) => id === food.id && options === food.options), 1)
      } else {
        foundFood.acount--
      }
    },
    //  购物车列表菜品添加
    addCartList (food) {
      if (food.options) {
        let foundFood = this.cartFoods.find(({ id, options }) => id === food.id && options === food.options)
        foundFood.acount += 1
      } else {
        let foundFood = this.cartFoods.find(({ id }) => id === food.id)
        foundFood.acount += 1
      }
    },
    //  套餐确认
    addWithSpec (food) {
      this.cartFoods.push(food)
      this.closeSpec()
    },
    //  关闭套餐选择
    closeSpec () {
      this.isShowSpec = false
    },


    lclassification (data) {
      this.language_Nnm_class = data
    },
    //  多语言切换分类名


    changeTypeNametitle (item) {
      if (item.hasOwnProperty('notice')) {
        switch (this.language_Nnm_class) {
          case 0:
            return item.notice_info
          case 1:
            return item.en_notice_info
          case 2:
            return item.de_notice_info
          case 3:
            return item.zn_notice_info
        }
      } else {
        switch (this.language_Nnm_class) {
          // switch (this.$i18n.locale) {
          case 0:
            return item.name
          case 1:
            return item.en_name
          case 2:
            return item.zn_name
          case 3:
            return
        }
        item.de_name
      }
    },

    changeTypeName (item) {
      switch (this.language_Nnm_class) {
        // switch (this.$i18n.locale) {
        case 0:
          return item.name
        case 1:
          return item.en_name
        case 2:
          return item.zn_name
        case 3:
          return item.de_name
          return
          
      }
    },

    changeTypeNamechilren (itemchilren) {
      switch (this.language_Nnm_class) {
        // switch (this.$i18n.locale) {
        case 0:
          return itemchilren.name
        case 1:
          return itemchilren.en_name
        case 2:
          return itemchilren.zn_name
        case 3:
          return itemchilren.de_name
          return
      }
    },








    //  多语言切换菜名
    changeFoodName (item) {
      if (item.hasOwnProperty('notice')) {
        switch (this.language_Nnm_class) {
          case 0:
            return item.notice_info
          case 1:
            return item.en_notice_info
          case 2:
            return item.de_notice_info
          case 3:
            return item.zn_notice_info
        }
      } else {
        switch (this.language_Nnm_class) {
          case 0:
            return item.name
          case 1:
            return item.en_name
          case 2:
            return item.zh_cn_name
          case 3:
            return item.de_name
        }
      }

      // switch (this.$i18n.locale) {

    },
    fooddescribe (item) {
      switch (this.language_Nnm_class) {
        case 0:
          return item.instro
        case 1:
          return item.zh_desc
        case 2:
          return item.en_desc
        case 3:
          return item.de_desc
      }
    },
    tableNumIsRight () {
      this.otherExpired = false
      let timestamp = Math.round(new Date().getTime() / 1e3)
      localStorage.setItem('tableNum', this.t_num)
      localStorage.setItem('lastTime', timestamp)
    },
    tableNumIsError () {
      this.otherExpired = false
      this.Expired = true
    },
    hidePanel () {
      this.panelShow = false
    },
    drop (target) {
      //  体验优化，异步执行下落动画
      this.$nextTick(() => {
        this.$refs.shopcart.drop(target)
      })
    },
    selectMenu (index, event) {
      if (!event._constructed) {
        return
      }
      this.foodsScroll.scrollTo(0, -this.listHeight[index], 200)
    },

    menuClick (index, event) {
      if (this.openChilden !== index) {
        this.openChilden = index
      } else {
        this.openChilden = ''
      }
      this.z_Num = index
      if (!event._constructed) {
        return
      }
      // 菜单联动 x,y,time
      let foodList = document.getElementsByClassName('food-list-hook')
       this.$nextTick(() => {
         this.menuScroll.refresh()
      })
      //  初始化第一个高度为0
      // for (let i = 0, l = foodList.length; i < l; i++) {
      //   let item = foodList[i]  //  每一个item都是刚才获取的food的每一个dom
      //   this.push(item)
      // }
      // this.foodsScroll.scrollTo(0, -this.listHeight[index], 200)
      this.foodsScroll.scrollToElement(foodList[index], 200, false, false)
     
    },
    // 二级菜单滑动
    menuClickchilds (index, chilrenindex, $event) {
      this.itemchilrenindex = chilrenindex
      let food = document.getElementById(chilrenindex + "_0")
      this.foodsScroll.scrollToElement(food, 200, 0, 0)

    },

    // 跳转到菜品详情页 food为点中的菜品
    selectFood (food, event) {

      if (!event._constructed) {
        return
      }
      // 点中的菜品food赋值给对象2{},selectedFood{}再传给food组件
      this.selectedFood = food
      this.$refs.food.show()
    },
    openHistory (selectFoods, event) {
      this.$http({
        method: 'POST',
        url: `${this.$REQ_URL}ctrl=order&action=orderHistory`,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        params: {
          'shopid': this.$SHOP_ID, 'table_num': this.t_num
        }
      }).then(res => {
        this.history = res.data
      })
      this.panelShow = true
    },
    _initScroll () {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {
        click: true,
        default: false
      })


      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
        probeType: 3,
        click: true
      })
      this.foodsScroll.on('scroll', (pos) => {
        this.foodsScrollY = Math.abs(Math.round(pos.y))
      })
    },
    _calculateHeight () {
      //  获取每一个food的dom对象
      let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
      let height = 0
      this.listHeight.push(height)  //  初始化第一个高度为0
      for (let i = 0, l = foodList.length; i < l; i++) {
        let item = foodList[i]  //  每一个item都是刚才获取的food的每一个dom
        height += item.clientHeight  //  主要是为了获取每一个foods内部块的高度
        this.listHeight.push(height)
      }
    }
  },
  computed: {
    menuCurrentIndex () {
      for (let i = 0, l = this.listHeight.length; i < l; i++) {
        let topHeight = this.listHeight[i]
        let bottomHeight = this.listHeight[i + 1]
        if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {
          this.z_Num = i


          // let box = document.getElementsByClassName('foods-wrapper');
          // let atpesent = document.getElementsByClassName('food-list-hook')[i]
          // let childeratpesent = atpesent.getElementsByClassName('childgreenbox')



          // console.log(he)
          // for (let i = 0; i < childeratpesent.length; i++) {
          //   // if (i >= 1) {
          //   console.log(i)
          //   var childerTop = childeratpesent[i].offsetTop - childeratpesent[i - 1].offsetTop
          //   console.log(childeratpesent[i], childerTop)
          // } else {
          //   console.log(i)
          // var childerTop = childeratpesent[i].offsetTop
          // var childerTops=childeratpesent[i].childerTop
          // console.log(childeratpesent[i], childerTop)
          // }
          // let childerdeffer=childerTop-childerTopup

          // if (childerTop <= 84) {
          // let id = childeratpesent[i].getAttribute('data-id')
          // console.log('滚动的菜品',childeratpesent[i],typeof(childerTop),childerTop)
          // this.itemchilrenindex = id
          // }
          // }



          return i
        }
      }
      return 0
    },

    selectFoods () {
      let foods = []
      this.goodsType.forEach((good) => {
        if (good.det) {
          good.det.forEach((food) => {
            if (food.acount) {
              foods.push(food)
            }
          })
        }
      })
      return foods
    }
  }
}
// background: url('../../../static/imgs/order_history.png');
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/stylus/mixin';

// 菜单
.history {
  position: fixed;
  right: 5%;
  top: 200px;
  top: 12px;
  width: 70px;
  height: 25px;
  color: white;
  background: url('../../../static/imgs/records.png');
  background-size: 100% 100%;
}

.goods {
  display: flex;
  position: absolute;
  top: 180px;
  bottom: 46px;
  width: 100%;
  overflow: hidden;
  background: #F5F5F5;

  // 菜单分类左栏
  .menu-wrapper {
    flex: 0 0 100px;
    background: #f3f5f7;
    border-radius: 8px;
    margin: 2px;
    width: 25%;

    // 菜单分类item
    .menu-item {
      display: flex !important;
      align-items: center;
      min-height: 46px;
      padding: 10px 12px;
      line-height: 14px;
      // border-bottom-1px(rgba(7, 17, 27, 0.1), 2px);
      justify-content: center;
      flex-wrap: wrap;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);

      // 菜单分类名
      .text {
        font-size: 16px;
        word-break: break-all;
        line-height: 18px;
        width: 100%;
      }

      // 被选中状态
      &.current {
        position: relative;
        z-index: 10;
        background: #fff;

        .text {
          color: #F4511E;
          border-none;
        }
      }
    }
  }

  // 具体分类下的菜品栏
  .foods-wrapper {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    margin: 1px;
    width: 70%;

    // 分类名
    .title {
      padding-left: 14px;
      min-height: 26px;
      line-height: 26px;
      // border-left: 2px solid #d9dde1;
      font-size: 12px;
      color: rgb(147, 153, 159);
      background: #f3f5f7;
    }

    // 该分类下的菜品
    .food-item {
      display: flex;
      margin: 8px;
      padding-bottom: 18px;
      border-bottom-1px(rgba(7, 17, 27, 0.1));

      &:last-child {
        border-none;
        margin-bottom: 0;
      }

      // 菜品图片
      .icon {
        flex: 0 0 57px;
        margin-right: 10px;
      }

      // 菜品内容
      .content {
        display: flex;
        flex-direction: column;
        flex: 1;

        .name {
          margin: 2px 0 8px 0;
          font-size: 17px;
          color: rgb(7, 17, 27);
          word-break: break-word;
          line-height: 17px;

          .product-num {
            font-weight: bold;
          }

          .remarks {
            color: red;
            font-size: 13px;
            margin-left: 2px;
          }
        }

        .desc {
          font-size: 13px;
          color: rgb(147, 153, 159);
          margin-bottom: 8px;
          line-height: 20px;
        }

        .price {
          font-weight: 700;
          line-height: 24px;

          .now {
            margin-right: 8px;
            font-size: 17px;
            color: rgb(240, 20, 20);
          }

          .old {
            text-decoration: line-through;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }
        }

        .cart-control-wrapper {
          position: absolute;
          right: -6px;
          bottom: 12px;
        }
      }
    }
  }
}

.prompt {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 400;
}

.prompt-content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  text-align: center;
  background-color: #ffffff;
  border-top: 4px solid #13b9f3;
  border-radius: 3%;
  z-index: 400;

  .title {
    line-height: 20px;
    padding: 15px 7px;
    border-bottom: 1px solid #e7e7e7;
    text-align: left;
  }

  .btn-wrapper {
    width: 100%;
    height: 50px;

    .btn {
      background-color: #13b9f3;
      height: 30px;
      line-height: 30px;
      padding: 0 8px;
      margin-top: 10px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      color: white;

      &.left {
        float: left;
        margin-left: 10px;
      }

      &.right {
        float: right;
        margin-right: 10px;
      }
    }
  }
}

.food-list {
  display: block !important;
}

.food-list:nth-child(1) .title {
  padding: 2px 18px 14px;
  font-size: 16px;
  color: #07111b;
  word-break: break-word;
  background: #fff;
}

.secondarymenu {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
  font-size: 16px;
}

.childdeg {
  -webkit-transform: rotate(90deg);
}

.itemchilrenindexcurrent {
  color: #f4511e;
}

.secondarymenu {
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}
</style>
